<template>
    <view>
        <view class="pushbox">
            <view class="pushbox_title">
                <image :src="$util.imgPath('pushlogo.png')"></image>
                <view class="title_text">精选推荐</view>
            </view>
            <view class="pushbox_goods">
                <scroll-view class="goods_scroll" scroll-x="true" @scroll="scrollSlide($event)">
                    <view class="scroll_item" v-for="(item,index) in goodsList" :key="index">
                        <view class="item_video">
                            <video :id="`myVideo-${index}`" muted :src="item.video_url" x5-video-player-type="h5-page" :controls="false" :show-fullscreen-btn="true" :show-play-btn="true" :show-center-play-btn="false" :enable-progress-gesture="false" :http-cache="true" @ended='videoEnd'>
                            </video>
                            <image class="video_stop" :data-index='index' :data-class='currentVideo' v-if="currentVideo==index" @click="videoStop()"  :src="$util.imgPath('stopvideo.png')" ></image>
                            <image class="video_star" :data-index='index' :data-class='currentVideo' v-if="currentVideo != index" @click="videoPlay(index)"  :src="$util.imgPath('videostar.png')" ></image>
                            <image class="video_view" @click="videoFull(index)"  :src="$util.imgPath('videoview.png')"></image>
                        </view>
                        <view class="item_img" @click="jump(item.sku_id)">
                            <image :src="item.goods_image" mode="aspectFill"></image>
                        </view>
                        <view class="item_msg" @click="jump(item.sku_id)">
                            <view class="msg_title">{{item.goods_name}}</view>
                            <view class="msg_price"> <text>￥</text>{{item.price}}</view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
	data() {
		return {
			goodsList: [],
			scrollLeft: 0,
			tabViewWidth: 0,
			currentVideo: -1,
			backup: 1
		}
	},
	props: {
		value: {
			type: Object
		}
	},
	onReady() {
		console.log('进来了我是你表哥，onReady')
		// var playVideo = uni.createVideoContext('myVideo', this)
		// playVideo.play()
		// this.videoContext = uni.createVideoContext('myVideo-1')
	},
	mounted() {
		this.$nextTick(() => {
			setTimeout(() => {
				const query = wx.createSelectorQuery().in(this)
				query.selectAll('.scroll_item').boundingClientRect()
				query.exec((res) => {
					console.log(res[0][0].width, 'rererererer')
					this.tabViewWidth = res[0][0].width
					this.playCurrentVideo(0)

				})
			}, 1000)
		})

		this.getShop()
	},
	methods: {
		/**
         * 播放当前的视频
         * tabViewWidth 是每个容器的 宽度
         * 需要切换的时候播放下个 容器的视频
         */
		playCurrentVideo(scrollLeft) {
			let num = Math.floor((scrollLeft + this.tabViewWidth / 2) / this.tabViewWidth)
			if (this.currentVideo == num) {
				console.log('进来了')
				return
			}
			this.videoPlay(num)
		},

		scrollSlide(event) {
			let scrollLeft = event.detail.scrollLeft
			this.playCurrentVideo(scrollLeft)
		},
		/**
         * 播放当前视频
         */
		videoPlay(index) {
			this.videoStop(() => {
				var playVideo = uni.createVideoContext('myVideo-' + index, this)
				playVideo.play()
				this.currentVideo = String(index)
			})
		},
		/**
         * 暂停当前视频
         */
		videoStop(callback) {
			var stopVideo = uni.createVideoContext('myVideo-' + this.currentVideo, this)
			stopVideo.pause()
			this.currentVideo = -1
			callback && callback()
		},
		/**
         * 播放结束
         */
		videoEnd() {
			this.currentVideo = -1
		},
		/**
         * 全屏
         */
		videoFull(index) {
			var playVideo = uni.createVideoContext('myVideo-' + index)
			playVideo.requestFullScreen(0)
			// this.playCurrentVideo(300)
		},
		getShop() {
			this.$request.goodsIndexshop({
				recommend_way: 2,
				is_video: 1
			}).then(res => {
				this.goodsList = res.data.list
			})
		},
		jump(skuId) {
			this.$util.redirectTo('/pages/goods/detail/detail', {
				sku_id: skuId
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.pushbox {
    width: 690rpx;
    height: 364rpx;
    margin-top: 24rpx;
    border-radius: 16rpx;
    background-image: linear-gradient(#FFF4E0, #ffffff);
    padding: 24rpx 26rpx;

    &_title {
        display: flex;
        align-items: center;

        image {
            width: 32rpx;
            height: 32rpx;
        }

        .title_text {
            margin-left: 10rpx;
            font-weight: bold;
            font-size: 32rpx;
            color: #222222;
        }
    }

    &_goods {
        margin-top: 26rpx;

        .goods_scroll {
            width: 650rpx;
            height: 240rpx;
            overflow: hidden;
            white-space: nowrap;

            .scroll_item {
                display: inline-block;
                width: 580rpx;
                height: 240rpx;
                margin-right: 16rpx;
                border: 4rpx solid #fbecd4;
                position: relative;
                background-color: #ffffff;

                .item_video {
                    width: 232rpx;
                    height: 232rpx;
                    overflow: hidden;
                    display: inline-block;
                    position: absolute;
                    top: 0rpx;
                    left: 0rpx;

                    video {
                        width: 232rpx;
                        height: 232rpx;
                        position: relative;
                    }
                }
                .video_stop {
                    width: 36rpx;
                    height: 36rpx;
                    position: absolute;
                    bottom: 12rpx;
                    left: 18rpx;
                    z-index: 99;
                }

                .video_star {
                    width: 36rpx;
                    height: 36rpx;
                    position: absolute;
                    bottom: 12rpx;
                    left: 18rpx;
                    z-index: 99;
                }

                .video_view {
                    width: 28rpx;
                    height: 28rpx;
                    position: absolute;
                    bottom: 12rpx;
                    right: 14rpx;
                    z-index: 99;
                }

                .item_img {
                    position: absolute;
					left: 240rpx;
					top: 28rpx;
                    width: 162rpx;
                    height: 162rpx;
                    overflow: hidden;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .item_msg {
                    position: absolute;
					right: 0;
					top: 40rpx;
                    width: 180rpx;

                    .msg_title {
						line-height: 38rpx;
                        margin-left: 8rpx;
                        white-space: pre-line;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                        color: #222222;
                        font-size: 22rpx;
                        font-weight: 400;
                    }

                    .msg_price {
                        color: #222222;
                        font-size: 28rpx;
                        font-weight: bold;
						margin-top: 12rpx;
						text{
							font-weight: 500;
							font-size: 20rpx;
						}
                    }
                }
            }
        }
    }
}
</style>
